<template>
  <div>
    <el-card class="goingout-main">
      <div class="operater-bar">
        <!--输入和选择区域-->
        <div class="input-select-field">
          <div>
            <el-text class="mx-1">时间：</el-text>
            <el-date-picker
              v-model="valueti"
              type="date"
              placeholder="请选择时间"
              :size="size"
            />
          </div>
          <div>
            <el-text class="mx-1">护理类型：</el-text>
            <el-select
              placeholder="请选择状态"
              size="normal"
              v-model="valuety"
              clearable
            >
              <el-option
                v-for="item in bindingStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <!--按钮区域-->
        <div class="btn-field">
          <el-button type="primary" @click="findnursing()">搜索</el-button>
        </div>
      </div>
      <div class="table-field">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="nursingId" label="ID" width="50px" />
          <el-table-column prop="eldName" label="老人姓名" width="100px" />
          <el-table-column prop="nursingType" label="护理类型" width="120px" />
          <el-table-column
            prop="nursingContents"
            label="护理内容"
            width="200px"
          />
          <el-table-column prop="nursingTimes" label="护理时间" width="200px" />
          <el-table-column prop="remarks" label="备注" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { computed } from "vue";
const store = useStore();
const getAccId = computed(() => store.getters.getId);
import * as nursing from "../../api/nursing.js";
import * as user from "@/api/user.js";
const tableData = ref([]);
const valuety = ref([]);
const valueti = ref([]);
const bindingStatusOptions = [
  {
    value: "0",
    label: "三级护理",
  },
  {
    value: "1",
    label: "二级护理",
  },
  {
    value: "3",
    label: "一级护理",
  },
];
// 查找老人信息
let elderId = ref();
let elderName = ref();
const findelder = async () => {
  try {
    const res = await user.getElderAPI({
      accId: getAccId.value,
    });
    elderId.value = res.data.data[0].eldId;
    elderName.value = res.data.data[0].eldName;
    if (elderName.value != null) {
      findnursing(elderName.value);
    }

    console.log(elderName.value);
  } catch (error) {
    console.error("获取管理员信息失败:", error);
  }
};
findelder();
const findnursing = (elderName) => {
  const params = reactive({
    eldId: elderId.value,
    nursingType: valuety.value,
  });
  nursing.getNursingByEldAPI(params).then((res) => {
    if (res.data.code != 2000) {
      console.log("请求错误");
    } else {
      tableData.value = res.data.data.map((item) => ({
        nursingId: item.nursingId,
        eldName: elderName,
        nursingType: bindingStatusOptions[item.nursingType].label,
        nursingContents: item.nursingContents,
        nursingTimes: item.nursingTimes,
        remarks: item.remarks,
      }));
      console.log(tableData.value);
    }
  });
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}

.goingout-main {
  width: 1175px;
  height: 575px;
}

.operater-bar {
  width: 100%;
  flex-direction: row;
  display: flex;
}

.input-select-field {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 750px;
}

.table-field {
  width: 100%;
  margin-top: 15px;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 150px;
}

.btn-field {
  width: 350px;
  display: flex;
  justify-content: flex-end;

  > .el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
